<script setup>
import { onMounted, ref } from "vue";
import moment from "moment";
import "moment/locale/zh-cn";
import VersionDialog from "./versionDialog.vue";
import { useUserStore } from "../stores/user";
import { useRouter } from "vue-router";

moment.locale("zh-cn");

const dataStore = useUserStore();
const router = useRouter();

const props = defineProps(["title"]);
let screen = ref();
onMounted(() => {
  updateDateTime();
  setInterval(updateDateTime, 1000);

  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
});
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
// 监听容器大小
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
};

const currentDateTime = ref(moment().format("YYYY年MM月DD日 HH:mm:ss"));

function updateDateTime() {
  const now = moment();
  currentDateTime.value = now.format("YYYY/MM/DD HH:mm:ss");
}

function goBack() {
  router.go(-1);
}

const visible = ref(false);
const versionData = ref([
  {
    noticeTitle: "v1.0",
    createTime: "2025/3/17",
    noticeContent: [
      "1.关键指标及区域热力图-根据业务展示关键指标以及各区县应用情况；",
      "2.多跨事件-根据业务展示实时多跨事件及其解决情况；",
      "3.在线资源供给-根据业务展示在线资源数量及分类；",
      "4.在线资源准入-根据业务展示资源准入数量及申报情况；",
      "5.在线资源应用-根据业务展示平台各类资源使用情况；",
      "6.在线资源评价及运用-根据业务展示在线资源评价及监管情况。",
    ],
  },
]);
</script>
<template>
  <div class="container">
    <div class="screen" ref="screen">
      <div class="header">
        <div class="header_c">
          <div class="time">{{ currentDateTime }}</div>
          <div class="title">
            {{ title }}
          </div>
          <div class="version" @click="visible = true">V1.0</div>

          <div
            class="user"
            ref="dropdown"
            @mouseover="keepDropdownOpen"
            @mouseleave="handle"
          >
            <img src="../assets/images/userIcon.png" class="user_icon" />
            <div class="text-4b-65-14 mr-1">{{ dataStore.userName }}</div>
            <!-- <img src="../assets/images/downArrow.png" class="user_arrow" /> -->
            <div class="back" @click="goBack"></div>
          </div>
        </div>
        <VersionDialog
          :visible="visible"
          title="版本历史记录"
          :data="versionData"
          @close="visible = false"
        >
        </VersionDialog>
      </div>
      <div class="main">
        <div class="ct_c">
          <slot name="left"></slot>
        </div>
        <div class="ct_cc">
          <slot name="center"></slot>
        </div>

        <div class="ct_c">
          <slot name="right"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container {
  width: 100vw;
  height: 100vh;
}
.screen {
  position: fixed;
  width: 1920px;
  height: 1080px;
  left: 50%;
  top: 50%;
  transform-origin: left top;
}
.header {
  width: 100%;
  height: 5.625rem;
  background: url("@/assets/images/head.png") no-repeat;
  background-size: 100% 100%;

  .header_c {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    .time {
      height: 100%;
      position: absolute;
      left: 0;
      font-size: 1rem;
      font-family: "Helvetica-Bold";
      color: #c9e9f8;
      font-weight: bold;
      display: flex;
      align-items: center;
    }

    .title {
      font-size: 2.5rem;
      font-weight: 600;
      background-image: linear-gradient(#ffffff 0%, #c3d4f6 100%);
      background-clip: text;
      color: transparent;
    }
    .version {
      position: absolute;
      top: 23%;
      right: 40%;
      font-size: 1.5rem;
      font-weight: 600;
      background-image: linear-gradient(#ffffff 0%, #c3d4f6 100%);
      background-clip: text;
      color: transparent;
      cursor: pointer;
      &:hover {
        color: #4bfff5;
      }
    }

    .user {
      height: 100%;
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      // cursor: pointer;
      .user_icon {
        width: 1.5rem;
        height: 1.5rem;
      }
      .user_arrow {
        width: 0.75rem;
        height: 0.75rem;
      }
      .back {
        width: 80px;
        height: 36px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url("@/assets/images/goBack.png") no-repeat;
        background-size: 100% 100%;
        color: #29e693;
        &:hover {
          cursor: pointer;
          background: url("@/assets/images/goBackHover.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
.main {
  display: flex;
  width: 100%;
  height: calc(100% - 6.25rem);
  gap: 1.25rem;
  justify-content: space-between;
  padding: 1px 0 5px;
  .ct_c {
    width: 25%;
    height: 100%;
    background: rgba(28, 82, 133, 0.2);
    border: 1px dashed #3196ca;
  }
  .ct_cc {
    width: 50%;
    height: 100%;
  }
}
</style>
